﻿import React from 'react';
import { Link } from 'react-router-dom';
import { inject, observer } from "mobx-react";

@inject("UiStore")
@observer
export class Header extends React.Component {
  render() {
    const explorerUrl = this.props.UiStore.web3Store.explorerUrl || 'https://etherscan.io';
    const contractAddress = this.props.UiStore.web3Store.contractAddress;

    return (
    <header className="header">
            <div className="container">
                <a href="http://batchsender.com" className="header-logo"><img src={require('../assets/images/logo.jpg')} /></a>
                <div className="header_right">
                    <div>
                        <a href="/metaMask_help.html" target="_blank" className="metamask_help">MetaMask钱包教程</a>
                        <a href="/eth_help.html" target="_blank" className="eth_help">使用教程</a>
                        <a href="https://www.youtube.com/watch?v=6Gf_kRE4MJU" target="_blank" className="metamask_help">视频</a>
                        <a href="http://en.batchsender.com" className="eth_help">English</a>
                    </div>
                    <div className="clear"></div>
                    <form className="form form_header">
                        {}
                        <label htmlFor="network"
                            className="label">合约地址: <a target="_blank" href={`${explorerUrl}/address/${contractAddress}`}>
                                {contractAddress}</a>
                        </label>
                        {}
                        <div className="socials">
                            <a href="https://github.com/TopPoints" target="_blank" className="socials-i socials-i_github"></a>
                        </div>
                    </form>
                </div>
        </div>
    </header>
    )
  }
}